<template>
	<view class="control-page">
		<framelayout>
			<uni-forms slot='configure' ref="form" :modelValue="data" label-width='25%' class='form'>
				<uni-forms-item label="visitor" required>
					<uni-easyinput type="number" v-model="data.visitor" placeholder="请输入访客" />
				</uni-forms-item>
				<uni-forms-item label="bg" required>
					<uni-file-picker @success="onsuccess" v-model="data.bg" @fail="onfail" limit="1" title="最多选择1张图片">
					</uni-file-picker>
				</uni-forms-item>
				<uni-forms-item label="avatar" required>
					<uni-file-picker @success="onsuccess" v-model="data.avatar" @fail="onfail" limit="1"
						title="最多选择1张图片"></uni-file-picker>
				</uni-forms-item>
				<uni-forms-item label="liked" required>
					<uni-easyinput type="number" v-model="data.liked" placeholder="请输入获赞" />
				</uni-forms-item>
				<uni-forms-item label="friend" required>
					<uni-easyinput type="number" v-model="data.friend" placeholder="请输入朋友" />
				</uni-forms-item>
				<uni-forms-item label="concern" required>
					<uni-easyinput type="number" v-model="data.concern" placeholder="请输入关注" />
				</uni-forms-item>
				<uni-forms-item label="follower" required>
					<uni-easyinput type="number" v-model="data.follower" placeholder="请输入粉丝" />
				</uni-forms-item>
				<uni-forms-item label="name" required>
					<uni-easyinput type="text" v-model="data.name" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item label="id" required>
					<uni-easyinput type="text" v-model="data.id" placeholder="请输入用户id" />
				</uni-forms-item>
				<uni-forms-item label="desc" required>
					<editor placeholder="请输入描述--------注:输入框特殊性导致每次不会读取数据,编辑完就直接替换" @input='descinput' id="editor">
					</editor>
				</uni-forms-item>
				<uni-forms-item label="tags" required>
					<div class="tags">
						<u-tag :text="item.text" :color="item.color" :bgColor='item.bgColor' closable
							@close="tagsdel(index)" v-for="(item, index) in data.tags" :key="index"></u-tag>
					</div>
					<div class='tags-edit'>
						<uni-easyinput class='tag-inp' type="text" v-model="tag" placeholder="请输入标签" />
						<uni-easyinput class='tag-inp' type="text" v-model="tagColor"
							placeholder="请输入标签颜色(不填默认#656565)" />
						<uni-easyinput class='tag-inp' type="text" v-model="tagBgColor"
							placeholder="请输入标签背景色(不填默认#f5f5f5)" />
						<div class="btn" @click='tagsadd'>
							<div class="text">添加标签</div>
							<div class="icon">
								<u-icon name="plus" size="14" color="#fff" :bold="true"></u-icon>
							</div>
						</div>
					</div>
				</uni-forms-item>
				<uni-forms-item label="tabsContents" required>
					<div class="tabsContents">
						<div class="item" v-for="(item, index) in data.tabsContents">
							<div class="left">
								<div class="pic">
									<image :src="item.src[0].url" mode="aspectFill" class="img"></image>
								</div>
								<div class="count">{{item.count}}</div>
							</div>
							<div class="btn" @click='tabsContentsdel(index)'>删除</div>
						</div>
					</div>
					<div class='tabsContents-edit'>
						<uni-file-picker class='tabsContents-item' @success="onsuccess" v-model="tabsContentsSrc"
							@fail="onfail" limit="1" title="最多选择1张图片"></uni-file-picker>
						<uni-easyinput class='tabsContents-item' type="number" v-model="tabsContentsCount"
							placeholder="请输入数量" />
						<div class="btn" @click='tabsContentsadd'>
							<div class="text">添加</div>
							<div class="icon">
								<u-icon name="plus" size="14" color="#fff" :bold="true"></u-icon>
							</div>
						</div>
					</div>
				</uni-forms-item>
				<uni-forms-item label="msgCount" required>
					<uni-easyinput type="text" v-model="data.msgCount" placeholder="请输入信息条数" />
				</uni-forms-item>
				<u-button text="提交" :customStyle="{width:'80px'}" type="primary" @click="submit"></u-button>
			</uni-forms>
			<index slot='preview' :configureData='data' :isDisplay='true'></index>
		</framelayout>
	</view>
</template>

<script>
	import framelayout from "./framelayout.vue"
	import index from "@/pages/index/index.vue"
	import {
		uploadMixin
	} from "@/mixins/uploadMixin.js"
	import {
		dataBaseMixin
	} from "@/mixins/dataBaseMixin.js"
	export default {
		mixins: [uploadMixin, dataBaseMixin],
		components: {
			framelayout,
			index,
		},
		data() {
			return {
				data: {},
				tag: '',
				tagColor: '',
				tagBgColor: '',
				tabsContentsSrc: [],
				tabsContentsCount: '',
			};
		},
		mounted() {
			this.getData('indexData')
		},
		methods: {
			// 提交
			submit() {
				this.updateData('indexData')
			},
			descinput(e) {
				// console.log(e.detail.html);
				this.$set(this.data, 'desc', e.detail.html)
			},
			tagsadd() {
				this.data.tags.push({
					text: this.tag,
					color: this.tagColor,
					bgColor: this.tagBgColor,
				})
			},
			tagsdel(index) {
				this.data.tags.splice(index, 1)
			},
			tabsContentsadd() {
				this.data.tabsContents.push({
					src: JSON.parse(JSON.stringify(this.tabsContentsSrc)),
					count: this.tabsContentsCount,
				})
				this.tabsContentsCount = ''
				this.tabsContentsSrc = {}
			},
			tabsContentsdel(index) {
				this.data.tabsContents.splice(index, 1)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.control-page {
		.form {
			padding: 10px;
		}

		::v-deep .uni-forms-item__content {
			display: flex;
			flex-wrap: wrap;
		}

		.img {
			max-width: 100px;
		}

		#editor {
			width: 100%;
			border: 1px solid #eaeaea;
			border-radius: 8px;
			padding: 10px;
			height: 150px;
		}

		.tags {
			width: 100%;
			padding: 10px;
			border: 1px solid #eaeaea;
			border-radius: 8px;
			display: flex;
			flex-wrap: wrap;
			min-height: 50px;

			::v-deep .u-transition {
				width: max-content;
				margin: 0 5px 5px;

				.u-tag-wrapper {
					width: max-content;
				}
			}
		}

		.tags-edit {
			width: 100%;

			::v-deep .tag-inp {
				width: 100%;
				margin: 3px 0;
			}

			.btn {
				display: flex;
				align-items: center;
				background-color: #52b6a6;
				width: max-content;
				height: 28px;
				border-radius: 8px;
				font-size: 12px;
				color: #fff;
				padding: 0 10px;
				margin-top: 3px;

				.icon {
					margin-left: 2px;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 20px;
					height: 20px;
				}
			}

		}

		.tabsContents {
			width: 100%;
			padding: 10px;
			border: 1px solid #eaeaea;
			border-radius: 8px;
			display: flex;
			flex-wrap: wrap;
			min-height: 50px;

			.item {
				width: 100%;
				height: 50px;
				display: flex;
				justify-content: space-between;
				padding: 0 15px;
				align-items: center;
				color: #000;
				font-size: 14px;

				.left {
					display: flex;
					align-items: center;
				}

				.pic {
					margin-right: 10px;
					width: 45px;
					height: 45px;

					.img {
						height: 100%;
					}
				}

				.btn {
					height: 28px;
					border-radius: 8px;
					overflow: hidden;
					background-color: #ea0000;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 12px;
					padding: 0 10px;
				}
			}
		}

		.tabsContents-edit {
			width: 100%;
			border-top: 1px dashed #00aa7f;
			margin-top: 10px;

			::v-deep .tabsContents-item {
				width: 100%;
				margin: 3px 0;
			}

			.btn {
				display: flex;
				align-items: center;
				background-color: #52b6a6;
				width: max-content;
				height: 28px;
				border-radius: 8px;
				font-size: 12px;
				color: #fff;
				padding: 0 10px;
				margin-top: 3px;

				.icon {
					margin-left: 2px;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 20px;
					height: 20px;
				}
			}
		}

	}
</style>
